<template>
  <div>
    <div class="fade-show" v-if="!initLoading">
      <div class="icon">
        <image
          v-if="orderDetail?.pay_status?.value"
          :src="$utils.staticimg('pay-success.png')"
          mode="widthFix"
        ></image>
        <image
          v-else
          :src="$utils.staticimg('pay-error.png')"
          mode="widthFix"
        ></image>
      </div>
      <template v-if="orderDetail.pay_status?.value">
        <money  class="flex center" fw size="fz-large-xx" :value="orderDetail.pay_price"></money>
        <div class="msg-text">订单支付成功</div>
      </template>
      <template v-else>
        <div class="msg-text">订单支付失败</div>
      </template>
      <div class="list">
        <div class="item">
          <div class="title">订单号</div>
          <div class="desc">{{ orderDetail.order_no }}</div>
        </div>
        <template v-if="orderDetail.pay_status?.value">
          <div class="item">
            <div class="title">交易时间</div>
            <div class="desc">{{ orderDetail.pay_time }}</div>
          </div>
          <div class="item">
            <div class="title">支付类型</div>
            <div class="desc">{{ orderDetail.pay_type.name }}</div>
          </div>
          <div class="item" v-if="orderDetail.pay_transaction">
            <div class="title">交易号</div>
            <div class="desc">{{ orderDetail.pay_transaction }}</div>
          </div>
        </template>
      </div>
      <div class="btn-box">
        <hover class="btn-left">
          <div @click="toBack">返回</div>
        </hover>
        <hover
          class="btn-right"
          :style="{
            background: DIYTHEME?.host_bg,
            color: DIYTHEME?.host_color,
          }"
        >
          <div @click="toUserOrder">查看订单</div>
        </hover>
      </div>
    </div>
    <init-load v-if="initLoading"></init-load>
  </div>
</template>



<script setup lang="ts">
import { useConfig } from "@/store";
import { onLoad } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import { ref, getCurrentInstance, onMounted } from "vue";
import { getPayResult } from "@/api/order";
import { Result, ResultError } from "@/types";

const { DIYTHEME } = storeToRefs(useConfig());

const initLoading = ref<boolean>(true);

const orderId = ref<number>(0);

const orderDetail = ref<any>();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

onLoad((options: any) => {
  orderId.value = options.order_id || 0;
  toInit();
});

const toInit = () => {
  getPayResult({
    id: orderId.value,
  })
    .then((res: Result) => {
      orderDetail.value = res.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const toBack = () => {
  uni.navigateBack();
};

const toUserOrder = () => {
  $utils.routeRedirectTo("/otherpages/user/order/detail", {
    order_id: orderId.value,
  });
};
</script>
<style scoped>
.icon {
  width: 200rpx;
  margin: 50rpx auto 50rpx;
}
.icon image {
  width: 200rpx;
}
.msg-text {
  line-height: 60rpx;
  font-size: 30rpx;
  text-align: center;
  margin-bottom: 20rpx;
}
.list {
  width: 90%;
  margin: 40rpx 5%;
}
.item {
  border-top: 1rpx solid #f9f9f9;
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  line-height: 100rpx;
}
.desc {
  color: var(--grey);
}

.btn-box {
  width: 90%;
  margin: 40rpx 5%;
  display: flex;
  justify-content: space-between;
  height: 70rpx;
  line-height: 70rpx;
}
.btn-left {
  text-align: center;
  width: 45%;
  border-radius: var(--base-radius-small);
  background: #f0f0f0;
  color: #000000;
}
.btn-right {
  width: 45%;
  text-align: center;
  border-radius: var(--base-radius-small);
}
.pay-price {
  color: red;
  font-size: 40rpx;
  font-weight: bold;
}
</style>
